import { RangeSliderDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.RangeSlider);

## Usage

<Demo data={RangeSliderDemos.configurator} />

## Controlled

```tsx
import { useState } from 'react';
import { RangeSlider } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<[number, number]>([20, 80]);
  return <RangeSlider value={value} onChange={setValue} />;
}
```

## Disabled

<Demo data={RangeSliderDemos.disabled} />

## Control label

To change label behavior and appearance, set the following props:

- `label` – formatter function, accepts value as an argument, set null to disable label, defaults to `f => f`
- `labelAlwaysOn` – if true – label will always be displayed, by default label is visible only when user is dragging
- `labelTransitionProps` – props passed down to the [Transition](/core/transition) component, can be used to customize label animation

<Demo data={RangeSliderDemos.label} />

## Min, max and step

<Demo data={RangeSliderDemos.step} />

## Domain

By default, `min` and `max` values define the possible range of values.
`domain` prop allows setting the possible range of values independently of the
`min` and `max` values:

<Demo data={RangeSliderDemos.domain} />

## Decimal values

To use `RangeSlider` with decimal values, set `min`, `max` and `step` props:

<Demo data={RangeSliderDemos.decimal} />

## minRange

Use `minRange` prop to control minimum range between `from` and `to` values
in `RangeSlider`. The default value is `10`. The example below shows how to
use `minRange` prop to capture decimal values from the user:

<Demo data={RangeSliderDemos.decimal} />

## pushOnOverlap

`pushOnOverlap` prop controls whether the thumbs should push each other when they overlap.
By default, `pushOnOverlap` is `true`, if you want to disable this behavior, set it to `false`.

Example of `pushOnOverlap={false}`:

<Demo data={RangeSliderDemos.pushOnOverlap} />

## Marks

Add any number of marks to slider by setting `marks` prop to an array of objects:

```tsx
const marks = [
  { value: 20 }, // -> displays mark on slider track
  { value: 40, label: '40%' }, // -> adds mark label below slider track
];
```

Note that mark value is relative to slider value, not width:

<Demo data={RangeSliderDemos.marks} />

## Restrict selection to marks

Set `restrictToMarks` prop to restrict slider value to marks only. Note that in
this case `step` prop is ignored:

<Demo data={RangeSliderDemos.restrictToMarks} />

## Inverted

You can invert the track with the `inverted` prop:

<Demo data={RangeSliderDemos.inverted} />

## Accessibility

`RangeSlider` component is accessible by default:

- Thumbs are focusable
- When the user uses mouse to interact with the slider, focus is moved to the slider track, when the user presses arrows focus is moved to the thumb
- Value can be changed with arrows with step increment/decrement

To label component for screen readers, add labels to thumbs:

```tsx
import { RangeSlider } from '@mantine/core';

function Demo() {
  return (
    <RangeSlider
      thumbFromLabel="First thumb aria-label"
      thumbToLabel="Second thumb aria-label"
    />
  );
}
```

## Keyboard interactions

<KeyboardEventsTable
  data={[
    {
      key: 'ArrowRight/ArrowUp',
      description: 'Increases slider value by one step',
    },
    {
      key: 'ArrowLeft/ArrowDown',
      description: 'Decreases slider value by one step',
    },
    { key: 'Home', description: 'Sets slider value to min value' },
    { key: 'End', description: 'Sets slider value to max value' },
  ]}
/>